<template>
  <div>
    <q-card class="no-shadow" bordered>
      <q-card-section class="text-h6">
        仪表图
        <q-btn
          icon="fa fa-download"
          class="float-right"
          @click="saveImage"
          flat
          dense
        >
          <q-tooltip>下载PNG</q-tooltip>
        </q-btn>
      </q-card-section>
      <q-card-section>
        <VChart
          :option="options"
          class="q-mt-md"
          :resizable="true"
          autoresize
          style="height: 285px"
          ref="guagechart"
        />
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import 'echarts';
import VChart from 'vue-echarts';
import { ref } from 'vue';
const guagechart = ref<InstanceType<typeof VChart>>();
const options = {
  tooltip: {
    formatter: '{a} <br/>{b} : {c}%',
  },
  series: [
    {
      name: '压力',
      type: 'gauge',
      progress: {
        show: true,
      },
      detail: {
        valueAnimation: true,
        formatter: '{value}',
      },
      data: [
        {
          value: 50,
          name: '压力',
        },
      ],
    },
  ],
};

const saveImage = () => {
  const linkSource = guagechart.value?.getDataURL();
  const downloadLink = document.createElement('a');
  document.body.appendChild(downloadLink);
  downloadLink.href = linkSource as string;
  downloadLink.target = '_self';
  downloadLink.download = 'GuageChart.png';
  downloadLink.click();
};
</script>

<style scoped></style>
